<template>
	<a-tabs class="front_application" type="card-gutter" v-model="activeName">
		<a-tab-pane key="1" title="常用应用">
			<a-grid :cols="3" :colGap="20" :rowGap="20" align="center" justify="center">
				<a-grid-item v-for="(item, index) in cardDatas" :key="index">
					<div class="block" @click="handleLookDetail(item)">
						<icon-xigua-color :size="48" />
						<p>{{ item.title }}</p>
					</div>
				</a-grid-item>
			</a-grid>
		</a-tab-pane>
		<a-tab-pane key="2" title="最近使用">
			<a-grid :cols="3" :colGap="20" :rowGap="20" align="center" justify="center">
				<a-grid-item v-for="(item, index) in cardDatas" :key="index">
					<div class="block" @click="handleLookDetail(item)">
						<icon-xigua-color :size="48" />
						<p>{{ item.title }}</p>
					</div>
				</a-grid-item>
			</a-grid>
		</a-tab-pane>
		<a-tab-pane key="3" title="我的收藏">
			<a-grid :cols="3" :colGap="20" :rowGap="20" align="center" justify="center">
				<a-grid-item v-for="(item, index) in cardDatas" :key="index">
					<div class="block" @click="handleLookDetail(item)">
						<icon-xigua-color :size="48" />
						<p>{{ item.title }}</p>
					</div>
				</a-grid-item>
			</a-grid>
		</a-tab-pane>
	</a-tabs>
</template>

<script lang="ts" setup>
const activeName = ref<string>('1');
const cardDatas = computed(() => {
	return Array.from({ length: 9 }, (_, i) => ({
		id: i + 1,
		title: '家具类合同预审（试运行）',
		depart: '后勤保障部',
		isCollect: i % 6 === 4 && i > 10 && i < 40,
		isCommon: i % 5 === 0 && i > 5 && i < 20
	}));
});
const handleLookDetail = (data: any) => {
	console.log(data);
};
</script>

<style lang="scss" scoped>
.front_application {
	margin-top: 20px;
	:deep(.arco-tabs-tab.arco-tabs-tab-active) {
		background-color: #fff;
	}
	:deep(.arco-tabs-content) {
		padding: 20px;
		background-color: #fff;
	}
	.arco-grid {
		height: 256px;
		.block {
			cursor: pointer;
		}
		p {
			line-height: 1;
			margin-top: 8px;
			overflow: hidden;
			white-space: nowrap;
			text-overflow: ellipsis;
		}
	}
}
</style>
